<template>
    <view>
        <!--  -->
        <view class="big">
            <view class="mm"></view>
            <view class="im">
                <van-image id="tou" round width="7rem" height="7rem" 
                :src="imgSrc"/>
            </view>
            <view class="zz">松拉马</view>
        </view>
        <!--  -->
        <view class="info">
            <view class="lan">
                <text class="zi1">昵称</text>
                <text class="zi2">松拉马</text>
            </view>
            <view class="lan">
                <text class="zi1">手机</text>
                <text class="zi2">158****6183</text>
                <view class="genghuan">更换手机</view>
            </view>
            <view class="lan">
                <text class="zi1">性别</text>
                <van-radio-group id="xuan" :value="radio" >
                    <van-radio name="1" @click="onChange">男 </van-radio>
                    <van-radio name="2" @click="onChange2">女</van-radio>
                </van-radio-group>
            </view>
            <view class="lan">
                <text class="zi1">生日</text>
                <text class="zi2 shengri">请输入生日信息，保存后不可修改</text>
            </view>
        </view>
        <view class="wei">
            <view class="mm1"></view>
            <view class="kk">
                <van-button color="#333" size="large">保存</van-button>
            </view>
            
        </view>
    </view>
</template>
<script>
export default {
    data(){
        return{
            radio:'0',
            imgSrc:'http://101.37.175.158:8888/images/touxiang.jpg'
        }
    },
    methods:{
        onChange(){
            this.radio = '1'
            console.log(111)
        },
        onChange2(){
            this.radio = '2'
            console.log(222)
        }
    }
}
</script>
<style scoped>
.big{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   border-bottom: #F7F6F6 10px solid;
}
.im{
    width: 100%;
    height: 250rpx;
    display: flex;
    justify-content: center;
}
.mm{
    width: 100%;
    height: 100rpx;
    opacity: 0;
}
.mm1{
    width: 100%;
    height: 60rpx;
    opacity: 0;
}
.zz{
    padding-bottom: 50rpx;
}
.info{
    height: 408rpx;
    width: 100%;
}
.lan{
    height: 100rpx;
    width: 90%;
    margin: 0 30rpx;
    border-bottom: #F7F6F6 1px solid;
    position: relative;
}
.zi1{
    display: inline-block;
    line-height: 100rpx;
}
.zi2{
    display: inline-block;
    line-height: 100rpx;
    margin-left: 80rpx;
}
.shengri{
    color: #BEBDBB;
    font-size: 14px;
}
#xuan{
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    left: 140rpx;
    top: 30rpx;
}
.genghuan{
    position: absolute;
    right: 50rpx;
    top: 20rpx;
    width: 150rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 12px;
    border: 1px solid #343434;
}
.wei{
    width: 100%;
    height: 320rpx;
    background-color:#F7F6F6 ;
}
.btn{
    width: 80%;
    height: 150rpx;
    background-color: #333333;
}
.kk{
    width: 90%;
    margin: auto;
}
</style>